<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>工作流 - 注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
    <style>
        .loginBody {
            background: url('/images/auth-bg.jpg') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .auth-form {
            width: 720px;
            min-height: 600px;
            padding: 30px 40px;
            background: rgba(255, 255, 255, 0.96);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 30px;
        }

        .form-header, .form-footer {
            grid-column: 1 / -1;
            text-align: center;
        }

        .form-header img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 2px solid #fff;
        }

        .layui-input {
            height: 44px;
            line-height: 44px;
            border-radius: 6px;
        }

        .layui-btn {
            height: 48px;
            line-height: 48px;
            font-size: 16px;
            margin-top: 15px;
        }

        @media (max-width: 768px) {
            .auth-form {
                width: 95%;
                grid-template-columns: 1fr;
                padding: 20px;
            }
        }
    </style>
</head>
<body class="loginBody">
<form class="layui-form auth-form">
    <div class="form-header">
        <img src="/images/avatar.png" class="userAvatar">
    </div>

    <!-- 第一列 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="loginname" lay-verify="required" placeholder="请输入用户名" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
            <input type="password" name="repassword" lay-verify="required|repassword" placeholder="确认密码" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="真实姓名" class="layui-input">
        </div>
    </div>

    <!-- 第二列 -->
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <select name="sex" lay-verify="required" class="layui-input">
                <option value="">请选择性别</option>
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-block">
            <input type="text" name="telephone" lay-verify="required|phone" placeholder="联系电话" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">电子邮箱</label>
        <div class="layui-input-block">
            <input type="email" name="email" lay-verify="required|email" placeholder="电子邮箱" class="layui-input">
        </div>
    </div>

    <div class="form-footer">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">立即注册</button>
        <div style="margin-top:15px">
            <a href="/login.html" style="color:#009688;font-size:13px">已有账号？立即登录</a>
        </div>
    </div>
</form>

<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        form.verify({
            repassword: function(value){
                if(value !== $('[name=password]').val()){
                    return '两次密码输入不一致';
                }
            },
            phone: [/^1[3-9]\d{9}$/, '请输入有效的手机号码'],
            email: [/^\w+@\w+\.\w+$/, '邮箱格式不正确']
        });

        form.on('submit(register)', function(data){
            layer.load(2);
            $.ajax({
                url: '/register',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function(rs) {
                    layer.closeAll();
                    console.log("注册响应:", rs); // 调试日志
                    if(rs.code === 200) {
                        layer.msg(rs.msg, {icon:1, time:1500}, function(){
                            // 使用绝对路径跳转
                            window.location.href = window.location.origin + '/login.html';
                        });
                    } else {
                        layer.msg(rs.msg || '注册失败', {icon:2, time:3000});
                    }
                },
                error: function(xhr) {
                    layer.closeAll();
                    let msg = '请求失败: ';
                    if(xhr.responseJSON && xhr.responseJSON.msg) {
                        msg += xhr.responseJSON.msg;
                    } else {
                        msg += xhr.statusText;
                    }
                    layer.msg(msg, {icon:2, time:3000});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>